<template>
  <div class="bgcolor">
    <el-card style="margin-left: 20px;margin-right: 20px;">
      <el-form
        ref="order"
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="20"
          justify="center"
        >
          <el-col :span="6">
            <div class="ddbh">
              订单编号：
              <span>{{ order.id }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ydbh">
              运单编号：
              <span>{{ order.transportOrder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="xdsj">
              下单时间：
              <span>{{ order.createTime }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddzt">
              订单状态：
              <label v-if="order.status == ' 23000'">
                待取件</label>
              <label
                v-else-if="order.status == '23001'"
              >已取件</label>
              <label
                v-else-if="order.status == '23003'"
              >网点入库</label>
              <label
                v-else-if="order.status == '23004'"
              >待装车</label>
              <label
                v-else-if="order.status == '23005'"
              >运输中</label>
              <label
                v-else-if="order.status == '23006'"
              >网点出库</label>
              <label
                v-else-if="order.status == '23007'"
              >待派送</label>
              <label
                v-else-if="order.status == '23008'"
              >派送中</label>
              <label
                v-else-if="order.status == '23009'"
                style="font-weight: normal;"
              >已签收</label>
              <label
                v-else-if="order.status == '23010'"
              >拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="yjddrq" style="margin-top: 30px;">
              预计到达日期：
              <label style="font-weight: normal;">{{ order.estimatedArrivalTime }}</label>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 基本信息 -->
    <el-collapse
      v-model="activeNames"
      style="margin-top: 20px; border: none"
      @change="handleChange"
    >
      <el-collapse-item name="1" style="margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">基本信息</h3></div>
        </template>
        <div class="block">
          <el-timeline>
            <div class="line" />
            <div
              class="pake-info"
              style="margin-top: 10px"
            >
              <img
                class="img-info1"
                src=""
                alt=""
              >
              <span><i class="el-icon-user-solid" style="margin-right: 10px;" />发货方</span>
            </div>
            <div style="margin-top: 0px; margin-left: 40px; display: flex">
              <div style="">
                <div class="demo-input-suffix base-info">
                  发货方姓名：
                  <span>{{ order.senderName }}</span>
                </div>

                <div class="demo-input-suffix base-info">
                  发货方地址：
                  <span />
                </div>
              </div>
              <div style="margin-left: 174px">
                <div class="demo-input-suffix base-info">
                  发货方电话：
                  <span>{{ order.senderPhone }}</span>
                  <span />
                </div>
                <div class="demo-input-suffix base-info">
                  &nbsp;&nbsp;&nbsp;详细地址：

                  <span />
                </div>
              </div>
            </div>
            <div
              class="pake-info"
              style="margin-top: 20px"
            >
              <img
                class="img-info2"
                src=""
                alt=""
              >
              <span
                style="display: inline-block; margin-top: 6px"
              ><i class="el-icon-user" style="margin-right: 10px;" />收货方</span>
            </div>
            <div style="margin-top: 0px; margin-left: 40px; display: flex">
              <div style="">
                <div class="demo-input-suffix base-info">
                  收货方姓名：
                  <span>{{ order.receiverName }}</span>
                </div>

                <div class="demo-input-suffix base-info">
                  收货方地址：
                  <span />
                </div>
              </div>
              <div style="margin-left: 145px">
                <div class="demo-input-suffix base-info">
                  收货方电话：
                  <span>{{ order.receiverPhone }}</span>
                </div>
                <div class="demo-input-suffix base-info">
                  &nbsp;&nbsp;&nbsp;详细地址：
                  <span />
                </div>
              </div>
            </div>
          </el-timeline>
        </div>
        <div style="margin-top: 25px;margin-left: 40px;font-size: 14px;">
          <i class="el-icon-s-promotion" style="margin-right: 10px;" />距离:&nbsp;&nbsp;&nbsp;{{ order.distance }}km<span />
        </div>
        <div style="margin-top: 20px;margin-left: 65px;font-size: 14px;">备注:&nbsp;&nbsp;&nbsp;暂无<span />
        </div>
      </el-collapse-item>
      <!-- 订单跟踪 -->
      <el-collapse-item name="2" style="margin-top: 20px; border: none; margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">订单跟踪</h3></div>
        </template>
      </el-collapse-item>
      <!-- 订单轨迹 -->
      <el-collapse-item name="3" style="margin-top: 20px; border: none;margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">订单轨迹</h3></div>
        </template>
        <baidu-map
          class="map"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          :map-click="false"
          @ready="ready"
        >
          <bm-control>
            <div class="myTap">
              <div class="myTapC">目的地</div>
              <div class="myTapC myTapCr">{{ cityName }}</div>
            </div>
          </bm-control>
          <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath" />
        </baidu-map>
      </el-collapse-item>
      <!-- 取件信息 -->
      <el-collapse-item name="4" style="margin-top: 20px; border: none;margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">订单轨迹</h3></div>
        </template>
        <el-row
          :gutter="20"
          justify="center"
          style="margin-top: 20px;margin-left: 20px;"
        >
          <el-col :span="6">
            <div class="ddbh">
              所在网点：
              <span>{{ order.agency }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddbh">
              取件类型：
              <span>{{ order. pickupType ===1? '同城订单' : '上门取件' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddbh">
              作业状态：
              <span>已完成</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddbh">
              取件快递员：
              <span>{{ order.stationName }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          justify="center"
          style="margin-top: 10px;margin-left: 20px;"
        >
          <el-col :span="6">
            <div class="ddbh">
              快递员电话：
              <span>{{ order.mobile }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddbh">
              预计取件时间：
              <span>{{ order.estimatedStartTime }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddbh">
              预计完成时间：
              <span>{{ order.estimatedArrivalTime }}</span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <!-- 费用信息 -->
      <el-collapse-item name="5" style="margin-top: 20px; border: none;margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">费用信息</h3></div>
        </template>
        <el-row
          :gutter="20"
          justify="center"
          style="margin-top: 20px;margin-left: 20px;"
        >
          <el-col :span="7">
            <div class="ddbh">
              运费：
              <span style="color: #ffb302;font-size: 16px;">18元</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="ddbh">
              支付方式：
              <span>预结</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="ddbh">
              付款状态：
              <span>未付</span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <!-- 货品信息 -->
      <el-collapse-item name="6" style="margin-top: 20px; border: none;margin-left: 20px;margin-right: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">货品信息</h3></div>
        </template>
        <template>
          <el-table
            :data="lists"
            style="width: 100%"
            empty-text="暂无数据"
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          >
            <el-table-column
              prop="date"
              label="序号"
              width="140"
            />
            <el-table-column
              prop="name"
              label="货品名称"
              width="200"
            />
            <el-table-column
              prop="name"
              label="货品类型"
              width="200"
            />
            <el-table-column
              prop="address"
              label="重量（千克）"
              width="200"
            />
            <el-table-column
              prop="address"
              label="体积（立方）"
              width="200"
            />
            <el-table-column
              prop="address"
              label="操作"
              width="200"
            />
          </el-table>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { orderInfo } from '@/api/application'
export default {
  data() {
    return {
      id: '',
      order: {
        id: '',
        createTime: '',
        status: '',
        estimatedArrivalTime: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        distance: '',
        agency: '',
        mobile: '',
        stationName: '',
        transportOrder: ''
      },
      activeNames: ['1', '2', '3', '4', '5', '6'],
      lists: [],
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 10,
      polylinePath: [
      ],
      cityName: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    this.orderInfo(this.id)
  },
  methods: {
    // 地图初始化
    async ready({ BMap, map }) {
      this.map = map
      this.BMap = BMap
    },
    // 主页信息
    async orderInfo(id) {
      // console(this.id)
      const msg = await orderInfo(id)
      this.polylinePath = [
        {
          lat: msg.senderCity.lat,
          lng: msg.senderCity.lng
        },
        {
          lat: msg.receiverCity.lat,
          lng: msg.receiverCity.lng
        }
      ]
      this.center = {
        lat: msg.senderCity.lat,
        lng: msg.senderCity.lng
      }
      this.cityName = msg.receiverCity.name
      this.order = msg
      this.order.agency = msg.taskPickup.agency.name
      this.order.mobile = msg.taskPickup.courier.mobile
      this.order.stationName = msg.taskPickup.courier.name
      this.order.transportOrder = msg.transportOrder.id
    },
    handleChange() {},
    updatePolylinePath(e) {
      this.polylinePath = e.target.getPath()
    }
  }
}
</script>

<style lang="scss" scoped>
  .bgcolor{
    background-color: #f3f5f9;
  }
  .soliy{
    background-color: #f8faff;
    width: 100%;
    height: 100%;
    display: flex; align-items: center;
  }
  .map{
  width:100%;
  height:650px;
  padding: 20px;
}
.myTap{
  display: flex;
  margin:20px 0 0 20px;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: white;
  border: 1px solid white;
  border-radius: 20px ;
}
.myTapC{
  flex:1
}
.myTapCr{
    background-color:#f6eeec
  }
</style>
